<template>
  <div class="resource-image">
    <div class="sticky-wrap">
      <sticky :sticky-top="80" class-name="submit">
        <el-button type="primary" @click="handleSubmit">保存</el-button>
        <el-button type="primary" @click="handleBack">返回列表</el-button>
      </sticky>
    </div>
    <div class="resource-image-default">
      <div class="resource-image-default-header">当前封面</div>
      <div class="resource-image-default-main">
        <div class="img">
          <img :src="form.newUrl?form.newUrl:form.url" alt>
        </div>
        <el-button type="primary" @click="form.newUrl = ''">还原</el-button>
      </div>
    </div>
    <div class="resource-image-custom">
      <div class="resource-image-custom-header">封面设置</div>
      <div class="resource-image-custom-main">
        <el-radio-group v-model="form.radio">
          <el-radio-button label="默认"/>
          <el-radio-button label="自选"/>
        </el-radio-group>
        <div v-if="form.radio === '默认'" class="resource-image-custom-main-default">
          <div
            v-for="(item,index) in img"
            :key="index"
            class="resource-image-custom-main-default-item"
            @click="selectImg(item,index)"
          >
            <img :src="item.url" alt>
          </div>
        </div>
        <div v-if="form.radio === '自选'" class="resource-image-custom-main-select">
          <video src="/src/icons/video.mp4" controls="controls" width="320" height="240"/>
          <br>
          <el-button type="primary">截图</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Sticky from '@/components/Sticky'
export default {
  components: {
    Sticky
  },
  data() {
    return {
      form: {
        name: 'title',
        newUrl: '',
        radio: '默认',
        url: '/src/icons/noimg@2x.png'
      },
      img: [
        {
          url: '/src/icons/addimg@2x.png'
        },
        {
          url: '/src/icons/addimg@2x.png'
        },
        {
          url: '/src/icons/addimg@2x.png'
        },
        {
          url: '/src/icons/addimg@2x.png'
        },
        {
          url: '/src/icons/addimg@2x.png'
        },
        {
          url: '/src/icons/addimg@2x.png'
        }
      ]
    }
  },
  methods: {
    handleSubmit() {
      console.log(this.form)
    },
    handleBack() {
      this.$router.go(-1)
    },
    selectImg(item, index) {
      alert(`点击了第${index + 1}个`)
      this.form.newUrl = '/src/icons/addimg@2x.png'
    }
  }
}
</script>

<style lang="scss">
.resource-image {
  .sticky-wrap{
    height:60px;
  }
  .submit {
    width: 100%;
    line-height: 60px;
    height: 60px !important;
    text-align: right;
    padding-right: 30px;
    background-color: #ebf4ff;
  }
  &-default {
    width: 100%;
    &-header {
      width: 100%;
      font-size: 16px;
      height: 38px;
      line-height: 38px;
      margin-top: 20px;
      border-bottom: 1px solid #ddd;
      background-color: #fafafa;
      overflow: hidden;
      padding-left: 10px;
    }
    &-main {
      width: 100%;
      padding-left: 107px;
      padding-top: 30px;
      overflow: hidden;
      position: relative;
      .el-button {
        margin-left: 230px;
        margin-top: 10px;
      }
      .img {
        width: 300px;
        img {
          width: 100%;
        }
      }
    }
  }
  &-custom {
    width: 100%;
    &-header {
      width: 100%;
      font-size: 16px;
      height: 38px;
      line-height: 38px;
      margin-top: 20px;
      border-bottom: 1px solid #ddd;
      background-color: #fafafa;
      overflow: hidden;
      padding-left: 10px;
    }
    &-main {
      width: 100%;
      padding-left: 107px;
      padding-top: 30px;
      overflow: hidden;
      position: relative;
      &-default {
        width: 1020px;
        padding-bottom: 10px;
        overflow: hidden;
        margin: 0 -15px;
        &-item {
          width: 300px;
          height: 167.25px;
          margin: 15px 15px 15px 15px;
          float: left;
          cursor: pointer;
          img {
            width: 100%;
          }
          img:hover {
            opacity: 0.8;
          }
        }
      }
      &-select {
        width: 100%;
        overflow: hidden;
        .el-button {
          margin-top: 10px;
        }
      }
    }
  }
}
</style>
